<template>
  <div class="login">
    <div class="top">
      <router-link to="/">&lt;</router-link>
      <div class="top_title">登录</div>
    </div>
    <div class="deng_lu">
      <img src="../../public/picture/logreg/1.png" alt="" />
      <div class="number">
        <div>
          <p>手机</p>
          <input
          autocomplete="off"
            type="text"
            @input="test()"
            v-model="phone"
            maxlength="11"
            name="iphone"
            placeholder="请输入手机号"
            @blur="test1()"
          />
          <span v-show="flag2">{{ hint }}</span>
          <span v-show="flag1">{{ hint1 }}</span>
        </div>
        <div>
          <p>密码</p>
          <input
            maxlength="15"
            type="password"
            v-model="password"
            name="password"
            placeholder="请输入密码"
          />
        </div>
      </div>
      <div class="jizu_wo">
        <input type="checkbox" name="chk" />
        <span>记住我（请在私人设备上使用此功能）</span>
      </div>
      <!-- <hr> -->
      <div class="jump">
        <router-link to="" @click.native="login()">登录</router-link>
        <p>
          <router-link to="/Xiugai">忘记密码？点这里找回</router-link>
        </p>
        <router-link to="/reg">注册</router-link>
      </div>
      <div class="san_dl">
        <hr />
        <p>其他方式登录</p>
        <ul>
          <li>
            <span class="iconfont icon-QQ"></span>
            <span>QQ</span>
          </li>
          <li>
            <span class="iconfont icon-zhifubao"></span>
            <span>支付宝</span>
          </li>
          <li>
            <span class="iconfont icon-youxiang"></span>
            <span>邮箱注册</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="ti_shi" v-show="flag">{{ tiShi }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      tiShi: "",
      flag: false,
      hint: "",
      hint1: "",
      hintShow: false,
      flag1: false,
      flag2: false,
    };
  },
  methods: {
    test() {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (
        this.phone == "" ||
        this.phone.length <= 10 ||
        !reg.test(this.phone)
      ) {
        this.flag1 = false;
        this.flag2=true
        this.hintShow = true;
        this.hint = "手机号码格式错误";
        // return false;
      } else {
        this.flag1 = false;
        this.flag2=true
        this.hintShow = true;
        this.hint = "手机号码格式正确";
        // return true;
      }
    },
    test1() {
      if (this.phone == "") {
        this.flag2 = true;
        this.flag1 = false;
        this.hintShow = true;
        this.hint = "手机号码格式错误";
      } else {
        this.$axios
          .post(
            "http://47.114.130.21:3000/log",
            "phone=" + String(this.phone) + "&flag=" + 2
          )
          .then((data) => {
            if (data.data.code == "500") {
              this.hint1 = data.data.msg;
              this.flag2 = false;
              this.flag1 = true;
            }else{
              this.flag1 = false;
              this.flag2 = false;
            }
          });
      }
    },
    login() {
      this.$axios
        .post(
          "http://47.114.130.21:3000/log",
          "phone=" +
            String(this.phone) +
            "&password=" +
            String(this.password) +
            "&flag=" +
            1
        )
        .then((data) => {
          if (data.data.code == 200) {
            this.tiShi = data.data.msg;
            if(data.data.store==''){
              this.$store.state.arr=[]
              this.$store.state.arr1=[]
              this.$store.state.shouCang=[]
            }else{
                this.$store.state.arr=JSON.parse(data.data.store).arr
                this.$store.state.arr1=JSON.parse(data.data.store).arr1
                this.$store.state.shouCang=JSON.parse(data.data.store).shouCang
            }
            localStorage.setItem("id", data.data.id);
            setTimeout(() => {
              this.$router.push("/Mycentre");
            }, 1000);
          } else if (data.data.code == 400) {
            this.tiShi = data.data.msg;
          } else if (data.data.code == 404) {
            this.tiShi = data.data.msg;
          }
          this.flag = true;
          setTimeout(() => {
            this.flag = false;
          }, 1000);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  background-color: #ffffff;
  z-index: 1;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  .ti_shi {
    top: 40%;
    position: absolute;
    background: #ccc;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 5px;
    border-radius: 2px;
    color: #fff;
  }
  .deng_lu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // padding: 0.266667rem 0.266667rem;
    border-radius: 5px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    width: 90%;
    height: 80%;
    img {
      width: 1.733333rem;
    }
    .number {
      margin-bottom: 0.133333rem;
      width: 100%;
      > div {
        p {
          text-align: left;
          font-size: 13px;
          margin-bottom: 0.133333rem;
        }
        input {
          height: 0.8rem;
          outline: none;
          border: none;
          width: 100%;
          font-size: 14px;
          border-bottom: 1px solid #cccccc;
          margin-bottom: 0.4rem;
          padding-left: 0.133333rem;
        }
        /* >span{
              position: absolute;
              line-height: 0.533333rem;
              top: 10px;
              width: 75%;
              left: 60px;
              background: #cccccc;
              height: 0.533333rem;
              border-radius: 13px;
              color: #ffffff;
            } */
      }
    }
    .jizu_wo {
      height: 0.666667rem;
      text-align: left;
      input {
        vertical-align: middle;
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.133333rem;
      }
      span {
        vertical-align: middle;
        color: #888;
        font-size: 13px;
      }
    }
    /* hr{
          margin: 0.453333rem 0px;
          border: 1px solid #cccccc;
          background: #cccccc;
        } */
    .jump {
      width: 100%;
      > a {
        text-align: center;
        width: 100%;
        display: block;
        margin-bottom: 0.266667rem;
        font-size: 17px;
      }
      > :first-child {
        margin-top: 0.9rem;
        line-height: 1.1rem;
        border-radius: 25px;
        height: 1.1rem;
        border: 1px solid #ff734c;
        background: #ff734c;
        color: #ffffff;
      }
      > p {
        text-align: right;
        margin-bottom: 0.133333rem;
        a {
          font-size: 12px;
          color: #333;
        }
      }
      > :last-child {
        margin-top: 0.5rem;
        color: #71797f;
      }
    }

    .san_dl {
      margin-top: 0.8rem;
      hr {
        color: rgba(0, 0, 0, 0.2);
        border: 0.1px solid rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
      }
      p {
        width: 3.733333rem;
        background: #ffffff;
        color: rgba(0, 0, 0, 0.2);
        font-size: 14px;
        background: #fff;
        text-align: center;
        margin: -0.32rem auto;
      }
      ul {
        margin-top: 1.066667rem;
        width: 100%;
        display: flex;
        flex: 1;
        list-style: none;
        justify-content: space-around;
        li {
          width: 100%;
          display: flex;
          flex-flow: row;
          justify-content: center;
          align-items: center;
          span {
            margin: 0px 0.4rem;
          }
          :first-child {
            font-size: 24px;
            color: #1cacea;
          }
          :last-child {
            margin-left: -0.133333rem;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>